<template>
  <div>
    <div>
      <el-row :gutter="10" style="margin-bottom: 60px">
        <el-col :span="6">
          <el-card style="color: #409EFF">
            <div><i class="el-icon-user-solid" /> 用户总数</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold" >
              {{usercount}}

            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #E6A23C">
            <div><i class="el-icon-s-shop" /> 帖子总数</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              {{postcount}}
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #F56C6C">
            <div><i class="el-icon-money" /> 开发时间</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              2月
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card style="color: #67C23A">
            <div><i class="el-icon-bank-card" /> 开发人数</div>
            <div style="padding: 10px 0; text-align: center; font-weight: bold">
              4人
            </div>
          </el-card>
        </el-col>
        </el-row>
    </div>
    <div>
      <h1>此系统为青大校园论坛（BBS）后台管理系统，可实现基本的数据管理和分析，权限管理</h1>
      <h1>可以实现的功能如下：</h1>
      <br><br>
    </div>
    <div style="height: 600px;width: 600px">
      <el-steps direction="vertical" :active="2">
        <el-step title="用户管理" icon="el-icon-user"
                 description="可以对用户进行基本的增删改查以及其管理状态、注册权限"></el-step>
        <el-step title="帖子管理" icon="el-icon-copy-document"
                 description="可以对帖子进行删除操作，多条件查询，状态管理"></el-step>
        <el-step title="评论管理" icon="el-icon-s-comment" description="可以对评论进行筛选查看以及删除"></el-step>
        <el-step title="数据分析" icon="el-icon-coin"
                 description="可以通过Ercharts对数据进行分析，同时也支持数据的导入导出"></el-step>
      </el-steps>
    </div>
    <el-calendar style="position:absolute; width: 600px;height: 100px;top: 240px;right: 0px">
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
        </p>
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  name: "Home",
  data(){
    return{
      usercount:"",
      postcount:""
    }
  },
  mounted: function(){
    this.request.get("/user/count").then(res=>{
      this.usercount=res
    })
    this.request.get("/post/count").then(res=>{
      this.postcount=res
    })
  },
  methods:{
  },

}
</script>
<style scoped>
.is-selected {
  color: #1989FA;
}
</style>